import { useMemo } from 'react';
import {
	Checkbox,
	Col,
	DatePicker,
	Divider,
	Form,
	Input,
	InputNumber,
	Radio,
	Rate,
	Row,
	Select,
	Slider,
	Switch,
	TimePicker,
	TreeSelect
} from 'antd';
import { createItemKey } from './utils';
import type {
	ExtendDatePicker,
	FormModalProps,
	FormItem,
	ExtendDateRangePicker,
	ExtendTimePicker,
	ExtendTimeRangePicker
} from '../type';

function useFormItems(props: Pick<FormModalProps, 'formItems' | 'columnGap'>) {
	const { columnGap = 10, formItems = [] } = props;

	const createItemNode = (config: FormItem) => {
		let node = null;
		const { type, props, ...itemProps } = config;
		switch (type) {
			case 'Input':
				node = <Input allowClear placeholder={`请输入${itemProps.label ?? ''}`} {...props} />;
				break;
			case 'InputNumber':
				node = <InputNumber placeholder="请输入" style={{ width: '100%' }} {...props} />;
				break;
			case 'TextArea':
				node = (
					<Input.TextArea allowClear placeholder={`请输入${itemProps.label ?? ''}`} {...props} />
				);
				break;
			case 'Select':
				node = <Select allowClear placeholder={`请选择${itemProps.label ?? ''}`} {...props} />;
				break;
			case 'TreeSelect':
				node = <TreeSelect allowClear placeholder={`请选择${itemProps.label ?? ''}`} {...props} />;
				break;
			case 'Radio':
				node = <Radio {...props} />;
				break;
			case 'RadioGroup':
				node = <Radio.Group {...props} />;
				break;
			case 'Checkbox':
				node = <Checkbox {...props} />;
				break;
			case 'CheckboxGroup':
				node = <Checkbox.Group {...props} />;
				break;
			case 'Switch':
				node = <Switch {...props} />;
				break;
			case 'Slider':
				node = <Slider {...props} />;
				break;
			case 'DatePicker':
				{
					const { ...pickerProps } = props || ({} as ExtendDatePicker);
					delete pickerProps.valueFormat;
					node = <DatePicker style={{ width: '100%' }} {...pickerProps} />;
				}
				break;
			case 'DateRangePicker':
				{
					const { ...pickerProps } = props || ({} as ExtendDateRangePicker);
					delete pickerProps.valueFormat;
					node = <DatePicker.RangePicker style={{ width: '100%' }} {...pickerProps} />;
				}
				break;
			case 'TimePicker':
				{
					const { ...pickerProps } = props || ({} as ExtendTimePicker);
					delete pickerProps.valueFormat;
					node = <TimePicker style={{ width: '100%' }} {...pickerProps} />;
				}
				break;
			case 'TimeRangePicker':
				{
					const { ...pickerProps } = props || ({} as ExtendTimeRangePicker);
					delete pickerProps.valueFormat;
					node = <TimePicker.RangePicker style={{ width: '100%' }} {...pickerProps} />;
				}
				break;
			case 'Rate':
				node = <Rate {...props} />;
				break;
			case 'Divider':
				node = <Divider {...props} />;
				break;
			default:
				node = <span style={{ fontSize: 14, color: 'red' }}>未检测到[type]属性</span>;
		}
		return node;
	};

	const node = useMemo(
		() =>
			formItems.map((config, index) => {
				let node = null;

				if (Array.isArray(config)) {
					const hasColSpan = config.find((item) => item.colSpan);
					if (hasColSpan) {
						node = (
							<Row key={index} style={{ width: '100%' }}>
								{config.map((item, index) => {
									const { ...itemProps } = item;
									delete itemProps.type;
									delete itemProps.props;
									const key = createItemKey(item);
									const itemName = Array.isArray(item.name) ? item.name[0] : item.name;
									return (
										<Col key={key || index} span={item.colSpan} style={{ flex: 1 }}>
											<Form.Item style={{ width: '100%' }} {...itemProps} name={itemName}>
												{item.children || createItemNode(item)}
											</Form.Item>
										</Col>
									);
								})}
							</Row>
						);
					} else {
						node = (
							<div key={index} style={{ width: '100%', display: 'flex', columnGap }}>
								{config.map((item, index) => {
									const { ...itemProps } = item;
									delete itemProps.type;
									delete itemProps.props;
									const key = createItemKey(item);
									const itemName = Array.isArray(item.name) ? item.name[0] : item.name;
									return (
										<Form.Item
											key={key || index}
											style={{ width: '100%' }}
											{...itemProps}
											name={itemName}
										>
											{item.children || createItemNode(item)}
										</Form.Item>
									);
								})}
							</div>
						);
					}
				} else {
					const { ...itemProps } = config;
					delete itemProps.type;
					delete itemProps.props;
					const key = createItemKey(config);
					const itemName = Array.isArray(config.name) ? config.name[0] : config.name;
					if (config.colSpan) {
						node = (
							<Row key={key || index} style={{ width: '100%' }}>
								<Col span={config.colSpan} style={{ flex: 1 }}>
									<Form.Item {...itemProps} name={itemName}>
										{config.children || createItemNode(config)}
									</Form.Item>
								</Col>
							</Row>
						);
					} else {
						node = (
							<Form.Item key={key || index} {...itemProps} name={itemName}>
								{config.children || createItemNode(config)}
							</Form.Item>
						);
					}
				}

				return node;
			}),
		[formItems]
	);

	return node;
}

export default useFormItems;
